<script setup>
import { ref, reactive } from "vue";
import { getAccounts, addAccount, modAccount, editAccount } from "@/api/user";
import { useUserStore, useSectorsStore } from "@/stores/counter";
import { roleToName, stateToName, showMessage, showNetError } from "@/public/public.js";
import { ElMessage } from "element-plus";

const userStore = useUserStore();
const token = userStore.userMsg.token;

const sectorsStore = useSectorsStore();

let tableData = reactive([]);

//定义列表每页显示的条数
const pageSize = ref(10);
let currentPageData = ref([]);
// //记住当前页面 使用的分页组件是从1计数开始的，为了与分页组件统一，申明的变量也从1开始
// let currentPage = 1;

//请求 所有用户信息
function init() {
  getAccounts(token).then(res => {
      console.log(res);
    if (res.data.code === 1) {
      res.data.data.forEach((val, idx) => {
        let obj = {
          avatar: val.avatar,
          id: val.id,
          password: "******",
          role: roleToName(val.role),
          sectorId: findNameFromId(val.sectorId),
          state: stateToName(val.state),
          username: val.username,
          accountId: val.accountId,
          // bindStaff: "无数据",
        };
        tableData.push(obj);
      });

      currentPageData.value = tableData.slice(0, pageSize.value);
      // console.log(currentPageData.value);
    } else if (res.data.code === 0) {
      showMessage(res.data.msg, "error", 2000);
    }
  }).catch(res=>{
    showNetError(res);
  });
}
init();
function findNameFromId(sectorId) {
  let name = "";
  sectorsStore.sectorsMsg.forEach(val => {
    if (val.sectorId === sectorId) {
      name = val.sectorName;
    }
  });
  return name;
}

const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleOpen = (index, row) => {
  console.log(index, row);
};

// 以下为分页功能
//page-size 改变时触发
function change_size(val) {
  console.log("change_size", val);
  currentPageData.value = tableData.slice(
    pageSize.value * (val - 1),
    pageSize.value * val
  );
}
//current-page 改变时触发
function change_current(val) {
  console.log("change_current", val);
  currentPageData.value = tableData.slice(
    pageSize.value * (val - 1),
    pageSize.value * val
  );
}
//用户点击上一页按钮改变当前页时触发
function click_prev() {
  // console.log('click_prev');
}
//用户点击下一页按钮改变当前页时触发
function click_next() {
  // console.log('click_next');
}

let dataInde = ref();

const changeState = (val, ind) => {
  dataInde.value = ind;
  const obj = {};
  obj.token = token;
  obj.accountId = val.accountId;
  obj.state = val.state === "启用" ? 1 : 0;
  // (num === 0) ? '启用' : '禁用';
  editAccount(obj).then(res => {
    console.log(res.data)
    if(res.data.code===1){
        ElMessage.success({
            message:"修改成功"
        })
    }
   currentPageData.value[dataInde.value].state = (obj.state ===1 ?"禁用":"启用")
   console.log(currentPageData.value[dataInde.value])
  }).catch(res=>{
    showNetError(res);
  });
};
</script>

<template>
  <div>
    <div class="account-header">
      <h3>账号列表</h3>
      <el-button
        type="primary"
        @click="$router.push({ path: '/editaccount', query: { id: 1 } })"
        class="account-header-add"
        >添加账号</el-button
      >
    </div>
    <el-table
      :data="currentPageData"
      border
      style="width: 90%"
      :cell-style="{ padding: '5px 0' }"
      empty-text="暂无账号列表数据"
      >
      
      <el-table-column prop="role" label="角色" align="center" />
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column prop="password" label="密码" align="center" />
      <!-- <el-table-column prop="bindStaff" label="绑定员工" align="center" /> -->
      <el-table-column prop="sectorId" label="所属部门" align="center" />
      <el-table-column prop="state" label="状态" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            color="#626aef"
            type="primary"
            size="small"
            @click.prevent="changeState(scope.row, scope.$index)"
            >启用/禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="tableData.length"
      class="mt-4"
      @size-change="change_size"
      @current-change="change_current"
      @prev-click="click_prev"
      @next-click="click_next"
      :page-size="pageSize" />
    <div style="height: 100px"></div>
  </div>
</template>

<style>
.account-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-header h3 {
  margin-left: 20px;
  height: 50px;
  line-height: 50px;
  color: var(--el-color-primary);
}

.account-header-add {
  display: block;
  margin-right: 140px;
}

.el-pagination {
  margin: 0 auto;
  margin-top: 30px;
  width: 50%;
}
.el-btn-edit {
  font-size: 16px;
}
.el-btn-edit span {
  color: #555;
}
.el-btn-delete {
  font-size: 14px;
}
.el-btn-delete span {
  color: #c33;
}
</style>
